<template>
    <div class="page task">
        <!-- <div class="header">
            <h1>任务</h1>
        </div> -->
        <tab :line-width="2" custom-bar-width="30px" defaultColor="#333" active-color="#0093f9">
            <tab-item :selected="this.page==0?true:false" @on-item-click="qucan">待取餐</tab-item>
            <tab-item :selected="this.page==1?true:false"  @on-item-click="peisonging">配送中</tab-item>
            <tab-item :selected="this.page==2?true:false"  @on-item-click="complate">已完成</tab-item>
        </tab>
        <b-scroll ref="bscroll" @load="load" :data="itemarr" :top="top" :nomore="nomore">
            <div slot="scroll">
                <item-one v-if="this.page==0?true:false" :dataarr="itemarr" @qucan="peisonging"></item-one>
                <item-two v-if="this.page==1?true:false" :dataarr="itemarr" @complate="complate"></item-two>
                <item-three v-if="this.page==2?true:false" :dataarr="itemarr"></item-three>
            </div>
        </b-scroll>
        
    </div>
</template>

<script>
import { Tab, TabItem, XButton } from 'vux'
import itemOne from 'components/task/item1.vue'
import itemTwo from 'components/task/item2.vue'
import itemThree from 'components/task/item3.vue'
import BScroll from 'better-scroll'
import bScroll from 'components/common/bScroll.vue'
export default {
    components: {
        Tab,
        TabItem,
        bScroll,
        itemOne,
        itemTwo,
        itemThree
    },
    data(){
        return{
            page:0,
            top:'44',
            status:'DELIVER_ACCEPTED',
            itemarr:[],
            currentPage : 1,
            pagesize : 20,
            maxpage:0,
            nomore:false,
            nodata:false
        }
    },
    mounted(){
        let id = this.$route.params.id
        this.page = id

        this.status = id==0?'DELIVER_ACCEPTED':id==1?'DELIVER_SENDING': 'DELIVER_FINISHED',
        console.log(id)
        this.initdata()
    },
    methods:{
        initdata(){
            this.itemarr = []
            this.currentPage =1;
            let token = localStorage.getItem("access_token");
            let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize,"status":this.status}
            this.ajaxplugin("/Deliver/task_list",params,(res) => {
                this.maxpage = res.data.total_page
                let arr = res.data.order_list
                console.log(arr)
                if(arr != ''){
                    this.$store.dispatch('hideNodata') 
                    this.nodata = false
                    this.itemarr = arr
                    this.$nextTick(() => {
                        //dom更新了 可以调用better-scroll了
                        this.$refs.bscroll.initScroll();
                    })
                    this.currentPage = this.currentPage+1;
                }else{
                    this.itemarr = []
                    this.nodata = true
                    this.$store.dispatch('showNodata') 
                }
                
            })
        },
        load(){
            console.log(this.currentPage)
            if(this.currentPage < this.maxpage){
                this.nomore = false;
                let token = localStorage.getItem("access_token");
                let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize,"status":this.status}
                this.ajaxplugin("/Deliver/task_list",params,(res) => {
                    let arr = res.data.order_list
                    if(this.itemarr == ''){
                        this.itemarr = arr ; 
                    }else{
                        for(let item of arr){
                            this.itemarr.push(item)
                        }
                    }
                    this.$nextTick(() => {
                      //dom更新了 可以调用better-scroll了
                      this.$refs.bscroll.initScroll();
                    })
                    this.currentPage = this.currentPage+1;
                })
            }else{
                this.nomore = true;
                this.currentPage = 1;
            }
        },
        qucan(){
            this.page = 0;
            this.status = "DELIVER_ACCEPTED"
            this.nomore = false;
            this.initdata()

        },
        peisonging(){
            this.page = 1;
            this.status = "DELIVER_SENDING"
            this.nomore = false;
            this.initdata()
        },
        complate(){
            this.page = 2;
            this.status = "DELIVER_FINISHED"
            this.nomore = false;
            this.initdata()
        }
    },
    
    
}
</script>

<style lang="stylus" scoped>
.wrapper
    width:100%
    position:fixed
    top:44px
    left:0
    bottom 50px
    padding-bottom 20px
    .loading-wrapper
        text-align:center
        height:20px
        width:100%
        position:absolute
        left:0
        bottom:0px
        p
            width:100%
            line-height:20px
            font-size:12px
            color:#888
</style>